<docs>
#加班申请
</docs>
<template>
  <div class="OvertimeApply">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="加班申请" name="01">
        <div class="ApplyCon">
          <el-form ref="form" :model="applyForm" :rules="applyFormRules" label-width="20%">
            <el-row>
              <el-form-item label="项目名称" prop="proName" required>
                <el-select
                  v-model="applyForm.proName"
                  filterable
                  placeholder="请选择"
                  style="width:100%"
                >
                  <el-option
                    v-for="item in applyFormList.proNameList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="加班时段" required>
                <el-col :span="11">
                  <el-form-item prop="startTime">
                    <el-date-picker
                      style="width:100%;"
                      v-model="applyForm.startTime"
                      :editable="false"
                      format="yyyy-MM-dd HH:mm"
                      type="datetime"
                      placeholder="选择开始日期时间"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="line">-</el-col>
                <el-col :span="11">
                  <el-date-picker
                    style="width:100%;"
                    v-model="applyForm.endTime"
                    :editable="false"
                    format="yyyy-MM-dd HH:mm"
                    type="datetime"
                    placeholder="选择开始日期时间"
                  ></el-date-picker>
                </el-col>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="加班理由" prop="desc" required>
                <el-input type="textarea" v-model="applyForm.desc" class="textarea"></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item class="btn">
                <el-button type="primary" icon="el-icon-upload">提交</el-button>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的申请" name="02">
        <el-form ref="myApplyform" :inline="true" :model="myApplyform" :rules="myApplyRules">
          <el-form-item label="开始日期" prop="startTime">
            <el-date-picker
              v-model="myApplyform.startTime"
              type="date"
              placeholder="预计开始日期"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束日期" prop="endTime">
            <el-date-picker
              v-model="myApplyform.endTime"
              type="date"
              placeholder="预计结束日期"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="筛选条件" prop="condition">
            <el-select
              v-model="myApplyform.condition"
              filterable
              placeholder="请选择"
              style="width:100%"
            >
              <el-option
                v-for="item in myApplyformList.conditionList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
          <el-button plain type="primary" icon="el-icon-refresh-left">重置</el-button>
        </el-form>
        <el-row>
          <el-table :data="myApplyTableData" style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="table-expand">
                  <el-form-item label="项目名称">
                    <span>{{props.row.name}}</span>
                  </el-form-item>
                  <el-form-item label="项目所属">
                    <span>{{props.row.super}}</span>
                  </el-form-item>
                  <el-form-item label="项目类型">
                    <span>{{props.row.type}}</span>
                  </el-form-item>
                  <el-form-item label="项目等级">
                    <el-tag type="danger">{{props.row.grade}}</el-tag>
                  </el-form-item>
                  <el-form-item label="预计开发时间">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{props.row.time}}</span>
                  </el-form-item>
                  <el-form-item label="项目描述">
                    <span>{{props.row.desc}}</span>
                  </el-form-item>
                  <el-form-item label="相关材料">
                    <a
                      href="javascript:void(0)"
                      class="filelink"
                      v-for="item in props.row.file"
                      :key="item.link"
                    >{{item.name}}</a>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="项目名称" prop="name" min-width="20%"></el-table-column>

            <el-table-column label="加班时间" min-width="20%">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.time }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项目类型" prop="type" min-width="10%"></el-table-column>
            <el-table-column label="项目等级" min-width="10%">
              <template slot-scope="scope">
                <el-tag type="danger">{{scope.row.grade}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="状态" min-width="10%">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.zt == '01'">审核通过</el-tag>
                <el-tag type="info" v-if="scope.row.zt == '02'">审核中</el-tag>
                <el-tag type="danger" v-if="scope.row.zt == '03'">审核被驳回</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { validator } from "common/js/valid";
export default {
  data() {
    return {
      activeName: "01",
      applyForm: {
        proName: "", //项目名称
        startTime: "", //开始时间
        endTime: "", //结束时间
        desc: "" //加班理由
      },
      applyFormRules: {
        startTime: [
          { required: true, message: "请输入项目描述", trigger: "blur" }
        ]
      },
      applyFormList: {
        proNameList: [
          {
            name: "灵活就业需求变更1",
            value: "01"
          },
          {
            name: "灵活就业需求变更2",
            value: "02"
          },
          {
            name: "灵活就业需求变更3",
            value: "03"
          }
        ]
      },
      myApplyform: {
        startTime: "", //开始时间
        endTime: "", //结束时间
        condition: "" //筛选条件
      },
      myApplyRules: {
        startTime: [{ validator: validator('256, "full", "项目名称", false') }],
        endTime: [{ validator: validator('256, "full", "项目名称", false') }],
        condition: [{ validator: validator('256, "full", "项目名称", false') }]
      },
      myApplyformList: {
        conditionList: [
          {
            name: "开发中",
            value: "01"
          },
          {
            name: "未开发",
            value: "02"
          }
        ]
      },
      myApplyTableData:[
         {
          name: "灵活就业需求变更_01",
          super: "灵活就业",
          leader:"张三",
          type: "新增",
          grade: "着急",
          day:'10人/天',
          zt:'01',// 已审核 审核中 审核被驳回
          time: "2020-10-10 18:00至2020-10-11 06:00",
          desc: "这是一段没有感情的描述文字",
          sfsh: "1", //是否分配人员
          shzt: "张龙、赵虎、王朝、马汉", 
          file: [
            {
              name: "asdadad.xls",
              link: "asdasdadadadasd"
            },
            {
              name: "asdadad.doc",
              link: "asdasdadadadasd"
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleClick({ name }) {
      console.log("name", name);
    }
  }
};
</script>

<style lang="scss" scoped>
.OvertimeApply {
  .ApplyCon {
    width: 50%;
    margin: 0 auto;
  }
}
/deep/.textarea textarea {
  height: 180px;
}
.table-expand {
  font-size: 0;
}
.table-expand /deep/ label {
  width: 120px;
  color: #99a9bf;
  text-align: right;
}
.table-expand /deep/ .el-form-item {
  display: block;
  margin: 0;
}
</style>
